<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="css/indexdefault.css" id="cssfile">
    <meta charset="UTF-8">
    <title>irismodelindex</title>
</head>
<body>
    <header>
        <nav class="navbar navbar-default navbg">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                        <img alt="Brand" src="img/logo.png">
                    </a>
                    <div class="navbar-brand">
                        <button type="button" class=" btn btn-dash"><span class="glyphicon glyphicon-list"></span></button>
                    </div>
                </div>

                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav nav-ul-margin">
                        <li>
                            <a href="#statusContainer" class="collapsed" data-toggle="collapse" role="button" id="teamStatus" aria-expanded="false">TeamStatus<span class="caret"></span></a>
                        </li>
                        <li class="dropdown skins">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Skin<span class="caret"></span></a>
                            <ul class="dropdown-menu" id="skinMenu">
                                <li id="defaultSkin"><a href="#">night(default)</a></li>
                                <li id="skySkin"><a href="#">sky</a></li>
                                <li id="orangeSkin"><a href="#">orange</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav pull-right nav-ul-margin nav-ul-fontsize">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-bell"></span><span class="badge">7</span></a>
                            <ul class="dropdown-menu bellDrop">
                                <li class="dropdown-header dropHeader label-primary"><span class="glyphicon glyphicon-bell"></span><span>7 Notifications</span></li>
                                <li>
                                    <a href="#">
                                        <span class="glyphicon glyphicon-user label-success"></span>
                                        <span class="body">
                                            <span>5 users online</span>
                                            <span class="glyphicon glyphicon-time"></span>
                                            <span>just now</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="glyphicon glyphicon-comment label-info"></span>
                                        <span class="body">
                                            <span>Martin commented</span>
                                            <span class="glyphicon glyphicon-time"></span>
                                            <span>19 mins</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="glyphicon glyphicon-lock label-warning"></span>
                                        <span class="body">
                                            <span>DW1 server locked</span>
                                            <span class="glyphicon glyphicon-time"></span>
                                            <span>32 mins</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="glyphicon glyphicon-hand-right label-primary"></span>
                                        <span class="body">
                                            <span>Twitter connected.</span>
                                            <span class="glyphicon glyphicon-time"></span>
                                            <span>55 mins</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="glyphicon glyphicon-star label-danger"></span>
                                        <span class="body">
                                            <span>Jane liked</span>
                                            <span class="glyphicon glyphicon-time"></span>
                                            <span>2 hrs</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="glyphicon glyphicon-alert label-warning"></span>
                                        <span class="body">
                                            <span>Database overload</span>
                                            <span class="glyphicon glyphicon-time"></span>
                                            <span>6 hrs</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="divider bellDivider" role="separator"></li>
                                <li><a href="#"><span>See all notifications</span><span class="glyphicon glyphicon-arrow-right"></span></a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-envelope"></span><span class="badge">3</span></a>
                            <ul class="dropdown-menu bellDrop">
                                <li class="dropdown-header dropHeader label-primary"><span class="glyphicon glyphicon-envelope"></span><span>3 Messages</span><span class="glyphicon glyphicon-edit pull-right"></span></li>
                                <li>
                                    <a href="#">
                                        <img src="img/avatar2.jpg">
                                        <span class="bellbody">
                                            <span class="from">Linda</span>
                                            <span class="message">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mole ...</span>
                                            <span class="time"><span class="timespan glyphicon glyphicon-time"></span><span>just now</span></span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/avatar4.jpg">
                                        <span class="bellbody">
                                            <span class="from">Lee</span>
                                            <span class="message">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mole ...</span>
                                            <span class="time"><span class="timespan glyphicon glyphicon-time"></span><span>just now</span></span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/avatar5.jpg">
                                        <span class="bellbody">
                                            <span class="from">Lily</span>
                                            <span class="message">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mole ...</span>
                                            <span class="time"><span class="timespan glyphicon glyphicon-time"></span><span>just now</span></span>
                                        </span>
                                    </a>
                                </li>
                                <li><a href="#"><span>See all notifications</span><span class="glyphicon glyphicon-arrow-right"></span></a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a id="taskbutton"href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-tasks"></span><span class="badge">6</span></a>
                            <ul id="#tasks" class="dropdown-menu bellDrop progressMessage dropaction">
                                <li class="dropdown-header dropHeader label-primary setpadding">
                                    <span class="clearfix clearfixset">
                                        <span class="glyphicon glyphicon-ok"></span>
                                        <span> 6 tasks in progress</span>
                                    </span>
                                </li>
                                <li>
                                    <a href="#">
                                      <span class="clearfix">
                                          <span class="pull-left">Software Update</span>
                                          <span class="pull-right">35%</span>
                                      </span>
                                      <div class="progress">
                                          <div class="progress-bar progress-bar-info" style="width: 35%">
                                              <span class="sr-only">35%Compelet(Success)</span>
                                          </div>
                                      </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                      <span class="clearfix">
                                          <span class="pull-left">Software Update</span>
                                          <span class="pull-right">60%</span>
                                      </span>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-warning" style="width: 60%">
                                                <span class="sr-only">60%Compelet(Success)</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                      <span class="clearfix">
                                          <span class="pull-left">Software Update</span>
                                          <span class="pull-right">50%</span>
                                      </span>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-danger" style="width: 50%">
                                                <span class="sr-only">50%Compelet(Success)</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li><a href="#"><span>See all notifications</span><span class="glyphicon glyphicon-arrow-right"></span></a></li>
                            </ul>
                        </li>
                        <li class="dropdown user">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img alt src="img/avatar3.jpg"><span class="user-span">Iris Huang</span><span class="caret user-span"></span></a>
                            <ul class="dropdown-menu bellDrop settings">
                                <li>
                                    <a href="#">
                                        <span class="glyphicon glyphicon-user"></span>
                                        <span> My Profile</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="glyphicon glyphicon-cog"></span>
                                        <span>Account Settings</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="glyphicon glyphicon-eye-open"></span>
                                        <span>Privacy Settings</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="glyphicon glyphicon-log-out"></span>
                                        <span>Log Out</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div  id="statusContainer" class="collapse" >
            <div class="status-container">
            <div class="row">
                <div class="col-md-2 col-lg-2  col-xs-6">
                    <div class="col-inner-container">
                        <a href="#" class="thumbnail">
                            <img src="img/avatar3.jpg">
                            <p>You</p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 35%">
                                    <span class="sr-only">35%Compelet(Success)</span>
                                </div>
                                <div class="progress-bar progress-bar-warning" style="width: 20%">
                                    <span class="sr-only">20%Compelet(warning)</span>
                                </div>
                                <div class="progress-bar progress-bar-danger" style="width: 10%">
                                    <span class="sr-only">10%Compelet(danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">6</span>COMPLETED
                                    <span class="pull-right glyphicon glyphicon-ok"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-yellow">3</span>IN-PROGRESS
                                    <span class="pull-right glyphicon glyphicon-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">1</span>PENDING
                                    <span class="pull-right glyphicon glyphicon-th-list"></span>
                                </div>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-md-2 col-lg-2  col-xs-6">
                    <div class="col-inner-container">
                        <a href="#" class="thumbnail">
                            <img src="img/avatar2.jpg">
                            <p>Linda</p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 35%">
                                    <span class="sr-only">35%Compelet(Success)</span>
                                </div>
                                <div class="progress-bar progress-bar-warning" style="width: 20%">
                                    <span class="sr-only">20%Compelet(warning)</span>
                                </div>
                                <div class="progress-bar progress-bar-danger" style="width: 10%">
                                    <span class="sr-only">10%Compelet(danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">6</span>COMPLETED
                                    <span class="pull-right glyphicon glyphicon-ok"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-yellow">3</span>IN-PROGRESS
                                    <span class="pull-right glyphicon glyphicon-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">1</span>PENDING
                                    <span class="pull-right glyphicon glyphicon-th-list"></span>
                                </div>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-md-2 col-lg-2  col-xs-6">
                    <div class="col-inner-container">
                        <a href="#" class="thumbnail">
                            <img src="img/avatar8.jpg">
                            <p>Lucy</p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 35%">
                                    <span class="sr-only">35%Compelet(Success)</span>
                                </div>
                                <div class="progress-bar progress-bar-warning" style="width: 20%">
                                    <span class="sr-only">20%Compelet(warning)</span>
                                </div>
                                <div class="progress-bar progress-bar-danger" style="width: 10%">
                                    <span class="sr-only">10%Compelet(danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">6</span>COMPLETED
                                    <span class="pull-right glyphicon glyphicon-ok"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-yellow">3</span>IN-PROGRESS
                                    <span class="pull-right glyphicon glyphicon-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">1</span>PENDING
                                    <span class="pull-right glyphicon glyphicon-th-list"></span>
                                </div>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-md-2 col-lg-2  col-xs-6">
                    <div class="col-inner-container">
                        <a href="#" class="thumbnail">
                            <img src="img/avatar4.jpg">
                            <p>Lee</p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 35%">
                                    <span class="sr-only">35%Compelet(Success)</span>
                                </div>
                                <div class="progress-bar progress-bar-warning" style="width: 20%">
                                    <span class="sr-only">20%Compelet(warning)</span>
                                </div>
                                <div class="progress-bar progress-bar-danger" style="width: 10%">
                                    <span class="sr-only">10%Compelet(danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">6</span>COMPLETED
                                    <span class="pull-right glyphicon glyphicon-ok"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-yellow">3</span>IN-PROGRESS
                                    <span class="pull-right glyphicon glyphicon-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">1</span>PENDING
                                    <span class="pull-right glyphicon glyphicon-th-list"></span>
                                </div>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-md-2 col-lg-2  col-xs-6">
                    <div class="col-inner-container">
                        <a href="#" class="thumbnail">
                            <img src="img/avatar5.jpg">
                            <p>Lily</p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 35%">
                                    <span class="sr-only">35%Compelet(Success)</span>
                                </div>
                                <div class="progress-bar progress-bar-warning" style="width: 20%">
                                    <span class="sr-only">20%Compelet(warning)</span>
                                </div>
                                <div class="progress-bar progress-bar-danger" style="width: 10%">
                                    <span class="sr-only">10%Compelet(danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">6</span>COMPLETED
                                    <span class="pull-right glyphicon glyphicon-ok"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-yellow">3</span>IN-PROGRESS
                                    <span class="pull-right glyphicon glyphicon-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">1</span>PENDING
                                    <span class="pull-right glyphicon glyphicon-th-list"></span>
                                </div>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-md-2 col-lg-2  col-xs-6">
                    <div class="col-inner-container">
                        <a href="#" class="thumbnail">
                            <img src="img/avatar6.jpg">
                            <p>Lisa</p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 35%">
                                    <span class="sr-only">35%Compelet(Success)</span>
                                </div>
                                <div class="progress-bar progress-bar-warning" style="width: 20%">
                                    <span class="sr-only">20%Compelet(warning)</span>
                                </div>
                                <div class="progress-bar progress-bar-danger" style="width: 10%">
                                    <span class="sr-only">10%Compelet(danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">6</span>COMPLETED
                                    <span class="pull-right glyphicon glyphicon-ok"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-yellow">3</span>IN-PROGRESS
                                    <span class="pull-right glyphicon glyphicon-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">1</span>PENDING
                                    <span class="pull-right glyphicon glyphicon-th-list"></span>
                                </div>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-md-2 col-lg-2  col-xs-6">
                    <div class="col-inner-container">
                        <a href="#" class="thumbnail">
                            <img src="img/avatar7.jpg">
                            <p>Adward</p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 35%">
                                    <span class="sr-only">35%Compelet(Success)</span>
                                </div>
                                <div class="progress-bar progress-bar-warning" style="width: 20%">
                                    <span class="sr-only">20%Compelet(warning)</span>
                                </div>
                                <div class="progress-bar progress-bar-danger" style="width: 10%">
                                    <span class="sr-only">10%Compelet(danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">6</span>COMPLETED
                                    <span class="pull-right glyphicon glyphicon-ok"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-yellow">3</span>IN-PROGRESS
                                    <span class="pull-right glyphicon glyphicon-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">1</span>PENDING
                                    <span class="pull-right glyphicon glyphicon-th-list"></span>
                                </div>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </header>
    <section id="page">


    </section>
</body>
    <script src="jquery/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-hover-dropdown.min.js"></script>
    <script src="jquery/jquery-ui.min.js"></script>
    <script src="jquery/jquery.cookie.js"></script>
    <script src="jquery/jquery.mousewheel.min.js"></script>
    <script src="jquery/jquery.mCustomScrollbar.js"></script>
    <script src="js/index.js"></script>
</html>